bootstrap与表单
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷. Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的BreakingNews都使用了该项目。国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。
flask-boostrap
-
说明:在flask中使用bootstrap,可以通过该扩展库完成。
-
安装:
pip install flask-bootstrap
-
使用:
from flask_bootstrap import Bootstrapbootstrap = Bootstrap(app)
-
模板
{# 继承自bootstrap基础模板 #}{% extends 'bootstrap/base.html' %}{% block title %}标题{% endblock %}{% block content %}
默认内容{% endblock %} -
bootstrap基础模板中的block
block 说明 doc 整个HTML文档 html 整个html标签 head 整个head标签 metas 一组meta标签 styles 一组link标签 body 整个body标签 navbar 导航条 content 页面内容 scripts 一组scripts标签 提示:当重写一个block后,原来的显示效果全没了,很可能是因为没有写
{ { super() }}
加载静态资源
-
flask中静态资源默认存放在static目录下,因此目录结构如下:
project/ # 项目目录 manage.py # 启动控制文件 templates/ # 模板文件目录 static/ # 静态资源目录 img/ # 图片 css/ # css文件 js/ # js文件 favicon.ico # 收藏夹图标
-
加载静态资源文件
{# 继承自自定义的基础模板 #}{% extends 'base.html' %}{% block title %}用户登录{% endblock %}{% block page_content %}
欢迎登录...
{# 加载图片资源 #} {# 静态资源加载的目录static,提前在img文件夹保存一个图片xxx.jpg #} {% endblock %}{% block styles %} { { super() }} {# 加载CSS文件:css文件可以从bootstrap中粘贴一个过来 #} {% endblock %}{% block head %} { { super() }} {# 加载网站收藏夹小图标:ico文件自行从百度下载一个ico文件 #} {% endblock %}{% block scripts %} { { super() }} {# 加载JS文件:js文件可以从bootstrap中粘贴一个过来 #} {% endblock %}
原生表单
-
准备模板文件
-
添加视图函数,渲染模板文件
@app.route('/login/')def login(): return render_template('login.html')
-
校验提交的请求
@app.route('/check/', methods=['GET', 'POST'])def check(): # args:所有的GET参数 # return request.args.get('username', '提交失败') # form:所有的POST参数 # return request.form.get('username', '提交失败') # values:所有的GET/POST参数 return request.values.get('username', '提交失败')
-
一个路由可以接收多种请求
@app.route('/login/', methods=['GET', 'POST'])def login(): if request.method == 'POST': return request.form.get('username', '登录失败') return render_template('login.html')
flask-wtf
-
说明:表单处理的扩展库,提供了CSRF、字段校验等实用功能,实用非常方便。
-
安装:
pip install flask-wtf
-
使用:
- 创建表单类:
# 导入表单类的基类from flask_wtf import FlaskForm# 导入字段类型from wtforms import StringField, SubmitField# 导入相关验证器from wtforms.validators import Length# 创建表单类class NameForm(FlaskForm): # name = StringField('用户名') # submit = SubmitField('提交') name = StringField('用户名', validators=[Length(3, 6, message='用户名必须是3~6个字符')]) submit = SubmitField('提交')
- 添加视图函数,创建表单对象,并分配的模板中
@app.route('/', methods=['GET', 'POST']) def index(): # 创建表单对象 form = NameForm() # 判断是否是有效的提交 if form.validate_on_submit(): return form.name.data # 在模板文件中渲染表单,form.html可以自己写一个,也可以百度一个 return render_template('form.html', form=form)
-
原生渲染表单
{# 原生渲染 #}
-
使用bootstrap进行渲染
{% extends 'bootstrap/base.html' %}{# 导入快速渲染表单的宏 #}{% from 'bootstrap/wtf.html' import quick_form %}{% block title %}bootstrap渲染表单类{% endblock %}{% block content %}
{# 在合适的位置渲染表单 #} { { quick_form(form) }}{% endblock %} -
POST重定向到GET:浏览器会记录最后的请求状态,若最后请求时POST,点击刷新时会提示再次提交表单。
@app.route('/', methods=['GET', 'POST'])def index(): # 创建表单对象 form = NameForm() # 判断是否是有效的提交 if form.validate_on_submit(): session['name'] = form.name.data return redirect(url_for('index')) name = session.get('name') # 在模板文件中渲染表单 return render_template('form2.html', form=form, name=name)
-
常见字段类型:请自行测试
字段类型 说明 StringField 普通文本 SubmitField 提交按钮 PasswordField 密文文本 HiddenField 隐藏字段 RadioField 单选框 BooleanField 复选框 SelectField 下拉框 FileField 文件上传 TextAreaField 文本域 IntegerField 文本字段,值为整数 FloatField 文本字段,值为浮点数 DateField datetime.date类型 DateTimeField datetime.datetime类型 -
常见验证器:请自行测试
验证器 说明 Length 规定字符长度 DataRequired 确保字段有值(提示信息与所写的不一致) Email 邮箱格式 IPAddress IP地址 NumberRange 数值的范围 URL 统一资源定位符格式 EqualTo 验证两个字段的一致性 Regexp 正则校验 -
自定义字段验证函数
# 创建表单类class NameForm(FlaskForm): 。。。 # 字段校验函数:'validate_字段名' def validate_name(self, field): if len(field.data) < 6: raise ValidationError('用户名不能少于6个字符')
消息闪烁
-
说明:
当用户发出请求后,状态发生了改变,需要系统给出警告提示等信息时,通常都是弹出一条消息,指示用户下一步的操作,用户可以手动关闭或自动消失,整个过程不会影响页面的正常显示。
-
使用:
- 在需要闪烁消息时,使用
flash
函数保存闪烁消息
@app.route('/', methods=['GET', 'POST'])def index(): # 创建表单对象 form = NameForm() # 判断是否是有效的提交 if form.validate_on_submit(): # 最后一次提交的名字 last_name = session.get('name') # 如果存在最后提交的名字,且最后提交的名字与之前保存的名字不相同时 if last_name and last_name != form.name.data: flash('大哥,又换名字了^_^') session['name'] = form.name.data return redirect(url_for('index')) name = session.get('name') # 在模板文件中渲染表单 return render_template('form2.html', form=form, name=name)
- 在模板文件中提供
get_flashed_messages
函数获取闪烁消息并渲染:
{% for message in get_flashed_messages() %}{# 闪烁消息文件可以从bootstrap中粘贴一个过来 #}
{ { message }}{% endfor %}说明:上面是从bootstrap粘贴的可消失的警告框。
- 在需要闪烁消息时,使用
flask-moment
-
说明:专门负责数据本地化显示的扩展库,使用非常方便。
-
安装:
pip install flask-moment
-
使用:
- python代码:
from flask_moment import Momentmoment = Moment(app)@app.route('/moment/')def mom(): from datetime import datetime, timedelta current_time = datetime.utcnow() + timedelta(seconds=-360) return render_template('mom.html', current_time=current_time)
- 模板文件:
{# 加载jQuery:依赖 #}{ { moment.include_jquery() }}{# 加载moment #}{ { moment.include_moment() }}{# 设置语言 #}{ { moment.locale('zh-CN') }}{# 简单的格式化时间显示 #}
时间:{ { moment(current_time).format('LLLL') }}时间:{ { moment(current_time).format('LLL') }}时间:{ { moment(current_time).format('LL') }}时间:{ { moment(current_time).format('L') }}{# 自定义格式化时间显示:如2018-05-20 01:03:14 #}自定义:{ { moment(current_time).format('YYYY-MM-DD HH:mm:ss') }}{# 显示时间差 #}发表于:{ { moment(current_time).fromNow() }}